<template>
  <div>
    <r-search :searchHandle="searchHandleAdd" />
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        // goodsNo: '',
        goodsNo: "",
        // type: '',
        type: "",
        name: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "goodsNo",
          placeholder: "商品编号",
          width: 150
        },
        {
          type: "input",
          prop: "name",
          placeholder: "商品Name",
          width: 150
        },
        {
          type: "select",
          prop: "categoryId",
          placeholder: "分类",
          width: 150,
          options: []
        },
        {
          type: "select",
          prop: "type",
          placeholder: "商品Type",
          width: 150,
          options: [
            {
              label: "计件",
              value: 1
            },
            {
              label: "计重",
              value: 2
            }
          ]
        },
        {
          type: "select",
          prop: "status",
          placeholder: "Status",
          width: 150,
          options: [
            {
              label: "上架",
              value: 1
            },
            {
              label: "下架",
              value: 2
            }
          ]
        }
      ],
      searchHandleAdd: [
        {
          label: "Add商品",
          type: "success",
          handle: e => this.elFormVisible()
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset()
        }
      ],
      tableData: [],
      tableCols: [
        // {
        //     label: 'ID',
        //     prop: 'id',
        //     // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        // },
        {
          label: "商品编号",
          prop: "goodsNo"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "商品Name",
          prop: "name"
        },
        {
          label: "商品图片",
          prop: "img",
          type: "image"
        },
        {
          label: "商品分类",
          prop: "categoryName"
        },
        {
          label: "成本价",
          prop: "costPrice"
        },
        {
          label: "配送上门价格",
          prop: "price1"
        },
        {
          label: "配送上门会员价格",
          prop: "vipPrice1"
        },
        {
          label: "配送到设备价格",
          prop: "price2"
        },
        {
          label: "配送到设备会员价格",
          prop: "vipPrice2"
        },
        {
          label: "配送方案",
          prop: "type",
          formatter: e =>
            e.type1 == 1 && e.type2 != 1
              ? "上门"
              : e.type2 == 1 && e.type1 != 1
              ? "机柜"
              : e.type2 == 1 && e.type1 == 1
              ? "上门/机柜"
              : ""
        },
        {
          label: "Status",
          prop: "status",
          formatter: e => (e.status == 1 ? "上架" : e.status == 2 ? "下架" : "")
        },
        {
          label: "Operations",
          type: "button",
          width: 170,
          btnList: [
            {
              label: "Edit",
              type: "primary",
              // isShow: e => e.orderId == '123' ? true : false,
              handle: row => this.elFormDetail(row)
            },
            {
              label: "Delete",
              type: "primary",
              handle: row =>
                this.TableDel("/sys/shopGoods/delete", { id: row.id })
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        name: "",
        goodsIntroduction: "",
        categoryId: "",
        type1: "",
        type2: "",
        costPrice: "",
        price1: "",
        vipPrice1: "",
        price2: "",
        vipPrice2: "",
        img: "",
        goodsDetails: "",
        status: ""
        // unit: ""
      },
      formCols: [
        { type: "input", label: "商品Name", width: 450, prop: "name" },
        {
          type: "input",
          label: "商品简介",
          width: 450,
          prop: "goodsIntroduction"
        },
        {
          type: "select",
          label: "商品分类",
          width: 450,
          prop: "categoryId",
          options: []
        },
        {
          type: "select",
          label: "是否上门商品",
          width: 120,
          prop: "type1",
          options: [
            { label: "是", value: 1 },
            { label: "否", value: 2 }
          ]
        },
        {
          type: "select",
          label: "是否机柜商品",
          width: 120,
          prop: "type2",
          options: [
            { label: "是", value: 1 },
            { label: "否", value: 2 }
          ]
        },
        // { type: "input", label: "商品单位", width: 450, prop: "unit", },
        {
          type: "input",
          label: "成本价",
          width: 80,
          prop: "costPrice",
          remark: "元"
        },
        {
          type: "input",
          label: "配送上门价格",
          width: 80,
          prop: "price1",
          remark: "元"
        },
        {
          type: "input",
          label: "配送上门会员价格",
          width: 80,
          prop: "vipPrice1",
          remark: "元"
        },
        {
          type: "input",
          label: "配送到设备价格",
          width: 80,
          prop: "price2",
          remark: "元"
        },
        {
          type: "input",
          label: "配送到设备会员价格",
          width: 80,
          prop: "vipPrice2",
          remark: "元"
        },
        {
          type: "upload",
          label: "商品图片",
          width: 200,
          prop: "img",
          remark: "只能上传jpg/png/MP4格式文件，文件不能超过500kb",
          rmblock: true,
          success: (res, file) => {
            this.$refs.elForm.loading = false;
            this.formData.img = res.data.imgPath;
          }
        },
        {
          type: "radio",
          label: "Status",
          width: 450,
          prop: "status",
          radios: [
            { label: "上架", value: 1 },
            { label: "下架", value: 2 }
          ]
        },
        {
          type: "tinymce",
          label: "商品Details",
          width: 450,
          prop: "goodsDetails"
        }
      ],
      formRules: {
        name: [{ required: true, message: "商品Name", trigger: "blur" }],
        goodsIntroduction: [
          { required: true, message: "商品简介", trigger: "blur" }
        ],
        categoryId: [{ required: true, message: "商品分类", trigger: "blur" }],
        // unit: [
        //     { required: true, message: '是否上门商品', trigger: 'blur' },
        // ],
        type1: [{ required: true, message: "是否机柜商品", trigger: "blur" }],
        type2: [{ required: true, message: "商品单位", trigger: "blur" }],
        costPrice: [{ required: true, message: "成本价", trigger: "blur" }],
        price1: [{ required: true, message: "配送上门价格", trigger: "blur" }],
        vipPrice1: [
          { required: true, message: "配送上门会员价格", trigger: "blur" }
        ],
        price2: [
          { required: true, message: "配送到设备价格", trigger: "blur" }
        ],
        vipPrice2: [
          { required: true, message: "配送到设备会员价格", trigger: "blur" }
        ],
        img: [{ required: true, message: "商品图片", trigger: "blur" }],
        goodsDetails: [{ required: true, message: "Status", trigger: "blur" }],
        status: [{ required: true, message: "商品Details", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let parm = { ...this.tablePage, ...this.searchData };
      let res = await this.api.takelist(parm);
      if (res) {
        this.tablePage.total = res.data.total;
        this.tableData = res.data.list;
      }
      let resclassfy = await this.api.takecfylist({ page: 1, limit: 10000 });
      this.formCols[2].options = [];
      this.searchForm[2].options = [];
      if (resclassfy) {
        for (let i = 0; i < resclassfy.data.list.length; i++) {
          this.formCols[2].options.push({
            label: resclassfy.data.list[i].name,
            value: resclassfy.data.list[i].id
          });
          this.searchForm[2].options.push({
            label: resclassfy.data.list[i].name,
            value: resclassfy.data.list[i].id
          });
        }
      }
    },
    async elFormSubmit(row) {
      // console.log(row);
      if (row) {
        await this.api.takeupdate(row);
      } else {
        let res = null;
        if (this.formData.id) {
          res = await this.api.takeupdate(this.formData); //advertsave
        } else {
          res = await this.api.takeadd(this.formData);
        }
        if (res) {
          this.elFormVisible();
          this.init();
        }
      }
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      // if (this.formCols[1].label == '登录密码') {
      //     this.formCols.splice(1, 1)
      // }

      this.elFormVisible();
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
